<template>
  <view class="tab-content">
    <view class="tab-header">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>
    <view class="content-list">
      <view class="content-item" 
        v-for="(item, index) in currentContentList" 
        :key="index"
        @click="onItemClick(item.id)"
      >
        <image :src="item.image" mode="aspectFill"></image>
        <text class="item-title">{{ item.title }}</text>
        <text class="item-desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => ['精选', '日记', '医院', '医生']
    },
    contentData: {
      type: Object,
      default: () => ({
        0: [
          { id: 1, title: '美白套餐', desc: '提亮肤色 补水保湿', image: '/static/selected1.jpg' },
          { id: 2, title: '玻尿酸填充', desc: '丰盈面部 改善细纹', image: '/static/selected2.jpg' }
        ],
        1: [
          { id: 3, title: '术后恢复日记', desc: '真实体验分享', image: '/static/diary1.jpg' },
          { id: 4, title: '日常护肤技巧', desc: '专家分享', image: '/static/diary2.jpg' }
        ],
        2: [
          { id: 5, title: 'XX医疗美容医院', desc: '专业医美机构', image: '/static/hospital1.jpg' },
          { id: 6, title: 'YY整形美容中心', desc: '多年品牌保障', image: '/static/hospital2.jpg' }
        ],
        3: [
          { id: 7, title: '张医生', desc: '皮肤科主任医师', image: '/static/doctor1.jpg' },
          { id: 8, title: '李医生', desc: '整形美容科医师', image: '/static/doctor2.jpg' }
        ]
      })
    }
  },
  data() {
    return {
      currentTab: 0
    }
  },
  computed: {
    currentContentList() {
      return this.contentData[this.currentTab] || []
    }
  },
  methods: {
    switchTab(index) {
      if (this.currentTab !== index) {
        this.currentTab = index
        this.$emit('tab-change', index)
      }
    },
    onItemClick(id) {
      this.$emit('item-click', id)
    }
  }
}
</script>

<style scoped>
.tab-content {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  background-color: #FFF;
}

.tab-header {
  display: flex;
  margin-bottom: 15px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.tab-item.active {
  border-bottom-color: #FF4500;
}

.tab-item.active text {
  color: #FF4500;
  font-weight: bold;
}

.content-list {
  display: flex;
  justify-content: space-between;
}

.content-item {
  width: calc(50% - 5px);
}

image {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.item-title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.item-desc {
  display: block;
  font-size: 12px;
  color: #666;
}
</style>